@if (content && !showXs) {
  <div class="footer-main-menu flex flex-row justify-between items-start">
    @for (menu of content; track menu) {
      <mat-list class="flex-auto" role="list">
        <div mat-subheader class="bold">{{ menu.label }}</div>
        @for (subMenu of menu.child; track subMenu; let i = $index) {
          @if (!subMenu.popup) {
            <mat-list-item role="listitem">
              @if (subMenu.icon) {
                <app-icon class="!mr-3 leading-none" matListItemIcon [content]="subMenu.icon" />
              }
              <app-link [content]="subMenu" />
            </mat-list-item>
          } @else {
            <mat-list-item role="listitem" [matMenuTriggerFor]="popup">
              @if (subMenu.icon) {
                <app-icon class="!mr-3 leading-none" matListItemIcon [content]="subMenu.icon" />
              }
              <span>{{ subMenu.label }}</span>
              <mat-menu #popup="matMenu" yPosition="above">
                <span [innerHTML]="subMenu.popup | safeHtml"></span>
              </mat-menu>
            </mat-list-item>
          }
          <ng-template #popup>
            <mat-list-item role="listitem" [matMenuTriggerFor]="popup">
              @if (subMenu.icon) {
                <app-icon class="!mr-3 leading-none" matListItemIcon [content]="subMenu.icon" />
              }
              <span>{{ subMenu.label }}</span>
              <mat-menu #popup="matMenu" yPosition="above">
                <span [innerHTML]="subMenu.popup | safeHtml"></span>
              </mat-menu>
            </mat-list-item>
          </ng-template>
        }
      </mat-list>
    }
  </div>
}
@if (mobileMenu && showXs) {
  <div class="mobile p-y-sm">
    <app-accordion-menu [content]="mobileMenu" />
  </div>
}
